<template>
	<view>
		<!--pages/subCard/subCard.wxml-->
		<view class="nocoupon">
			<view :class="'nav' + (activeindex==1?' active':'')" @tap="changeindex" data-index="1">购买次卡</view>
			<view :class="'nav' + (activeindex==2?' active':'')" @tap="changeindex" data-index="2">购买卡包</view>
			<view :class="'nav' + (activeindex==3?' active':'')" @tap="changeindex" data-index="3">我的卡包</view>
		</view>
		<view v-if="!coupon" class="empty">暂无数据</view>
		<view v-if="activeindex != 3" class="couponBgbox">
			<block v-for="(item, index) in coupon" :key="index" :for-id="index">
				<view class="sub-card-box" @tap.stop="goCardDetails" :data-index="index" :data-store_id="item.store_id"
					:style="item.is_use!=1&&activeindex==3?'opacity:0.7':''">
					<view class='subcard-title'>
						<view class="subcard-img-box">
							<image class="subcard-img" :src="item.store_image" mode="aspectFit"></image>
						</view>
						<view>{{item.store_name}}</view>
					</view>
					<view class="couponBg">
						<image :src="item.image_url"></image>
						<view class="couponBox" :style="'color:' + item.card_name_color">
							<view class="coupon_left">
								<view class="coupon_title">{{item.name}}</view>
								<view>
									<view v-if="item.type==4" class="coupon_money">￥{{item.money}}</view>
									<view v-if="item.type==5" class="coupon_money"></view>
									<view class="coupon_time" v-if="activeindex==1 || activeindex==2">购买截止时间：
										{{item.end_time}}</view>
									<block v-else-if="activeindex==3">
										<view class="coupon_time">获得时间： {{item.addtime}}</view>
										<view class="coupon_time">有效时间： {{item.effective_time}}</view>
									</block>
								</view>
							</view>
							<view class="coupon_right">
								<view class="coupon_buy"
									:style="'background:' + item.btn_background + ';color:' + item.btn_text_color"
									v-if="activeindex==1 || activeindex==2">去购买</view>
								<block v-else-if="activeindex==3">
									<view v-if="item.is_use==1" class="coupon_buy"
										:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">
										去使用</view>
									<view v-else-if="item.is_use==2" class="coupon_buy"
										:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">
										已用完</view>
									<view v-else-if="item.is_use==3" class="coupon_buy"
										:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">
										已过期</view>
									<view v-else-if="item.is_use==4" class="coupon_buy"
										:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">
										异常</view>
								</block>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-if="activeindex == 3" class='couponBgbox'>
			<block v-for="(item, index) in coupon" :key="index" :for-id="index">
				<view class='sub-coupon-bg' @tap.stop="goCardDetails" :data-index="index"
					:style="item.is_use!=1&&activeindex==3?'opacity:0.7':''">
					<view class="image-box">
						<image :src='item.image_url'></image>
					</view>
					<view class='couponBox' :style="'color:' + item.card_name_color">
						<view class="coupon_left">
							<view class='coupon_title'>{{item.name}}</view>
							<view>
								<view v-if="item.type==4" class="coupon_money">￥{{item.money}}</view>
								<view v-if="item.type==5" class="coupon_money"></view>
								<view class='coupon_time' v-if="activeindex==1 || activeindex==2">购买截止时间：
									{{item.end_time}}</view>
								<block v-else-if="activeindex==3">
									<view class='coupon_time'>获得时间： {{item.addtime}}</view>
									<view class='coupon_time'>有效时间： {{item.effective_time}}</view>
								</block>
							</view>
						</view>
						<view class="coupon_right">
							<view class="coupon_buy"
								:style="'background:' + item.btn_background + ';color:' + item.btn_text_color"
								v-if="activeindex==1 || activeindex==2">去购买</view>
							<block v-else-if="activeindex==3">
								<view v-if="item.is_use==1" class="coupon_buy"
									:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">去使用
								</view>
								<view v-else-if="item.is_use==2" class="coupon_buy"
									:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">已用完
								</view>
								<view v-else-if="item.is_use==3" class="coupon_buy"
									:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">已过期
								</view>
								<view v-else-if="item.is_use==4" class="coupon_buy"
									:style="'background:' + item.btn_background + ';color:' + item.btn_text_color">异常
								</view>
							</block>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	// pages/subCard/subCard.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				coupon: [],
				activeindex: 1,
				canLoad: true,
				page: 1
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			await this.$onLaunched;
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			if (options && (options.store_id)) {
				this.$store.store_id = options.store_id;
			}
			this.getSubCard();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			var that = this;

			if (that.canLoad) {
				if (that.activeindex == 1) {
					that.getSubCard();
				} else if (that.activeindex == 2) {
					that.getCardBag();
				} else if (that.activeindex == 3) {
					that.getBuy();
				}
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			return {
				title: '次卡',
				path: '/pages/mine/subCard/subCard?store_id=' + gthis.$store.store_id + '&share_uid=' +
					app.XcxData.userInfo.uid,
				success: function(res) { // 转发成功
				},
				fail: function(res) { // 转发失败
				}
			};
		},
		methods: {
			//获取次卡
			getSubCard: function() {
				var that = this;
				getApp().globalData.sendRequest({
					url: '/SubCard/subCardList_v1',
					type: "post",
					data: {
						page: that.page,
						limit: 10
					},
					success: function(res) {
						if (res.status == 1) {
							if (that.page == 1) {
								that.setData({
									coupon: res.sub_card.length ? res.sub_card : null
								});
							} else {
								var coupon = that.coupon;
								coupon.push.apply(coupon, res.sub_card);
								that.setData({
									coupon: coupon
								});
							}

							if (res.sub_card && res.sub_card.length == 10) {
								that.setData({
									page: that.page + 1
								});
							} else {
								that.setData({
									canLoad: false
								});
							}
						} else {
							that.setData({
								coupon: null
							});
						}
					}
				});
			},
			//获取卡包
			getCardBag: function() {
				var that = this;
				getApp().globalData.sendRequest({
					url: '/SubCard/cardBagList_v1',
					type: "post",
					data: {
						page: that.page,
						limit: 10
					},
					success: function(res) {
						if (res.status == 1) {
							if (that.page == 1) {
								that.setData({
									coupon: res.card_bag.length ? res.card_bag : null
								});
							} else {
								var coupon = that.coupon;
								coupon.push.apply(coupon, res.card_bag);
								that.setData({
									coupon: coupon
								});
							}

							if (res.card_bag && res.card_bag.length == 10) {
								that.setData({
									page: that.page + 1
								});
							} else {
								that.setData({
									canLoad: false
								});
							}
						} else {
							that.setData({
								coupon: null
							});
						}
					}
				});
			},
			//已购买
			getBuy: function() {
				var that = this;
				getApp().globalData.sendRequest({
					url: '/SubCard/userCardList',
					type: "post",
					data: {
						page: that.page,
						limit: 10
					},
					success: function(res) {
						if (res.status == 1) {
							if (that.page == 1) {
								that.setData({
									coupon: res.card_list.length ? res.card_list : null
								});
							} else {
								var coupon = that.coupon;
								coupon.push.apply(coupon, res.card_list);
								that.setData({
									coupon: coupon
								});
							}

							if (res.card_list && res.card_list.length == 10) {
								that.setData({
									page: that.page + 1
								});
							} else {
								that.setData({
									canLoad: false
								});
							}
						} else {
							that.setData({
								coupon: null
							});
						}
					}
				});
			},
			// 切换优惠券状态
			changeindex: function(e) {
				var index = e.currentTarget.dataset.index;

				if (index != this.activeindex) {
					this.setData({
						coupon: []
					});
				}

				this.setData({
					activeindex: index,
					canLoad: true,
					page: 1
				});

				if (index == 1) {
					this.getSubCard();
				} else if (index == 2) {
					this.getCardBag();
				} else if (index == 3) {
					this.getBuy();
				}
			},
			//前往详情
			goCardDetails: function(e) {
				var that = this;
				var activeindex = that.activeindex;
				var index = e.currentTarget.dataset.index;
				var store_id = e.currentTarget.dataset.store_id;
				var id = that.coupon[index].id;

				if (activeindex == 1 || activeindex == 2) {
					uni.navigateTo({
						url: '../buySubCard/buySubCard?card_id=' + id + '&type=' + activeindex + '&store_id=' +
							store_id
					});
				} else if (activeindex == 3) {
					uni.navigateTo({
						url: '../cardDetails/cardDetails?card_id=' + id
					});
				}
			}
		}
	};
</script>
<style>
	@import "./subCard.css";
</style>
